<template>
  <div>
    <el-row justify="center" :gutter="20">
      <el-col :span="24" style="margin-top: 12px;">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>订单快捷查询</span>
          </div>
          <div>
            <el-form inline :model="startQuickFilterFields">
              <el-form-item label="车牌号">
                <el-input v-model="startQuickFilterFields.CarNo" placeholder="车牌号"></el-input>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker v-model="startQuickFilterFields.StartTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="开始时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间">
                <el-date-picker v-model="startQuickFilterFields.EndTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="入场时间">
                <el-date-picker v-model="startQuickFilterFields.InTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="入场时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="订单号">
                <el-input v-model="startQuickFilterFields.OrderNo" placeholder="订单号"></el-input>
              </el-form-item>
              <el-form-item label="支付时间">
                <el-date-picker v-model="startQuickFilterFields.PayTime" type="datetime" value-format="yyyyMMddHHmmss" :editable="false" placeholder="支付时间"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="CarNo" label="车牌号码"></el-table-column>
            <el-table-column prop="CarType" label="费用类型"></el-table-column>
            <el-table-column width="150" prop="InTime" label="入场时间"></el-table-column>
            <el-table-column width="150" prop="PayTime" label="支付时间"></el-table-column>
            <el-table-column width="150" prop="ChannelTime" label="渠道支付时间"></el-table-column>
            <el-table-column prop="Channel" label="支付渠道">
              <template slot-scope="scope">
                <span v-if="scope.row.Channel === 'weixin'" style="color: #55a532">微信</span>
                <span v-else-if="scope.row.Channel === 'alipay'"  style="color: #a59232">支付宝</span>
                <span v-else-if="scope.row.Channel === 'blpay'"  style="color: #327ba5">泊链</span>
                <span v-else  style="color: #c096c4">其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="PayType" label="支付方式">
              <template slot-scope="scope">
                <span v-if="scope.row.PayType === 'hostscan'">主扫</span>
                <span v-else-if="scope.row.PayType === 'obeyscan'">被扫</span>
                <span v-else-if="scope.row.PayType === 'ordercode'">一单一码</span>
                <span v-else-if="scope.row.PayType === 'autopay'">无感</span>
                <span v-else-if="scope.row.PayType === 'cash'">现金</span>
                <span v-else-if="scope.row.PayType === 'apppay'">app支付</span>
                <span v-else-if="scope.row.PayType === 'facepay'">刷脸</span>
                <span v-else-if="scope.row.PayType === 'prestore'">预存</span>
                <span v-else-if="scope.row.PayType === 'other'">其他</span>
                <span v-else>其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="MustFee" label="应收金额(元)">
              <template slot-scope="scope">
                {{  parseInt(scope.row.MustFee) / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="PayFee" label="实收金额">
              <template slot-scope="scope">
                {{  parseInt(scope.row.PayFee) / 100 }}
              </template>
            </el-table-column>
            <el-table-column prop="FeeType" label="费用类型">
              <template slot-scope="scope">
                <span v-if="parseInt(scope.row.FeeType) === 0">正常缴费</span>
                <span v-else-if="parseInt(scope.row.FeeType) === 1">超时补费</span>
                <span v-else>其他</span>
              </template>
            </el-table-column>
            <el-table-column prop="PayStaus" label="支付状态">
              <template slot-scope="scope">
                <span v-if="scope.row.PayStaus === 'wait'">等待</span>
                <span v-else-if="scope.row.PayStaus === 'lost'">失败</span>
                <span v-else-if="scope.row.PayStaus === 'ok'">成功</span>
                <span v-else-if="scope.row.PayStaus === 'cancel'">取消</span>
                <span v-else>其他</span>
              </template>
            </el-table-column>
            <el-table-column width="220" prop="PayNo" label="支付流水号"></el-table-column>
            <el-table-column width="220" prop="OrderNo" label="订单号"></el-table-column>
            <el-table-column prop="ParkName" label="车场名称"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "order",
  data: () => ({
    startQuickFilterFields: {
      CarNo: "",
      StartTime: "",
      EndTime: "",
      InTime: "",
      OrderNo: "",
      PayTime: "",
    },
    tableData: [],
  }),
  methods: {
    reqListOrder() {
      axios.get("http://218.75.78.171:9082/api/bo/getPayList", {
        params: {
          ...this.startQuickFilterFields
        }
      }).then(resp => {
        let { data: { status_code, data: { list: { PayInfo } } }} = resp
        if (PayInfo instanceof Array) {
          this.tableData = PayInfo
        } else {
          this.tableData = [ PayInfo ]
        }
      }).catch(err => {
        this.$message.error('查询错误');
      })
    },
    search() {
      this.reqListOrder()
    }
  },
  created() {
    this.reqListOrder()
  },
}
</script>

<style scoped>

</style>
